<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JarManage</title>
    <script src="js/load.js"></script>
    <link rel="shortcut icon" href="images/favicon.png">
    <style>
        .layui-card-header {
            background-color: #eee !important;
        }

        .layui-card {
            border: 1px solid #eee !important;
        }

        .opbody {
            display: flex;
            flex-direction: column;
        }

        .optitle {
            width: 100px;
            text-align: center;
        }

        .optitle {
            width: 100px;
            text-align: center;
        }

        .oprow {
            display: flex;
            flex-direction: row;
            height: 40px;
            align-items: center;
        }

        .frame {
            width: 100%;
            margin: 0;
            border: none;
            vertical-align: bottom;
            height: calc(100%);
        }

        .layui-nav-tree .layui-nav-item {
            display: flex !important;
            flex-direction: row !important;
            align-items: center;
            justify-content: center;
        }

        .menu-title {
            width: 80px;
        }

        .menu-icon {
            font-size: 16px;
        }

        .layui-tab {
            margin: 0 !important;
            width: 100%;
        }

        .layui-tab-content {
            padding: 0 !important;
            height: calc(100% - 41px);
        }

        .layui-tab-item {
            height: 100% !important;
        }

        .layui-tab-title .layui-this {
            color: #fff !important;
            background-color: #009688 !important;
        }

        .nav-slected {
            color: #fff !important;
            background-color: #009688 !important;
        }
    </style>
</head>

<body>
<div class="layui-fluid" style="padding: 0;height: 100%;width: 100%">
    <div class="flexrow">
        <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="menu">
            <li class="layui-nav-item" id="menu_Machine">
                <i class="layui-icon layui-icon-windows menu-icon"></i>
                <a class="menu-title" href="#" onclick="ChangeFrame('Machine','服务器监控')">服务器监控</a>
            </li>
            <li class="layui-nav-item" id="menu_JarManage">
                <i class="layui-icon layui-icon-website menu-icon"></i>
                <a class="menu-title" href="#" onclick="ChangeFrame('JarManage','Jar包部署')">Jar包部署</a>
            </li>
            <li class="layui-nav-item" id="menu_WarManage">
                <i class="layui-icon layui-icon-website menu-icon"></i>
                <a class="menu-title" href="#" onclick="ChangeFrame('WarManage','War包部署')">War包部署</a>
            </li>
            <li class="layui-nav-item" id="menu_MySQL">
                <i class="layui-icon layui-icon-set-fill menu-icon"></i>
                <a class="menu-title" href="#" onclick="ChangeFrame('MySQL','MySQL管理')">MySQL管理</a>
            </li>
            <li class="layui-nav-item" id="menu_Redis">
                <i class="layui-icon layui-icon-template-1 menu-icon"></i>
                <a class="menu-title" href="#" onclick="ChangeFrame('Redis','Redis管理')">Redis管理</a>
            </li>
            <li class="layui-nav-item" id="menu_Nginx">
                <i class="layui-icon layui-icon-link menu-icon"></i>
                <a class="menu-title" href="#" onclick="ChangeFrame('Nginx','Nginx管理')">Nginx管理</a>
            </li>
            <li class="layui-nav-item" id="menu_File">
                <i class="layui-icon layui-icon-file-b menu-icon"></i>
                <a class="menu-title" href="#" onclick="ChangeFrame('File','文件管理')">文件管理</a>
            </li>
            <li class="layui-nav-item" id="menu_StaticDepoly">
                <i class="layui-icon layui-icon-app menu-icon"></i>
                <a class="menu-title" href="#" onclick="ChangeFrame('StaticDepoly','静态部署')">静态部署</a>
            </li>
            <li class="layui-nav-item" id="menu_DynamicProxy">
                <i class="layui-icon layui-icon-release menu-icon"></i>
                <a class="menu-title" href="#" onclick="ChangeFrame('DynamicProxy','动态代理')">动态代理</a>
            </li>
            <li class="layui-nav-item" id="menu_FireWall">
                <i class="layui-icon layui-icon-group menu-icon"></i>
                <a class="menu-title" href="#" onclick="ChangeFrame('FireWall','防火墙管理')">防火墙管理</a>
            </li>
            <li class="layui-nav-item" id="menu_Service">
                <i class="layui-icon layui-icon-set menu-icon"></i>
                <a class="menu-title" href="#" onclick="ChangeFrame('Service','服务管理')">服务管理</a>
            </li>
        </ul>
        <div class="layui-tab" lay-filter="maintab" lay-allowClose="true">
            <ul class="layui-tab-title">

            </ul>
            <div class="layui-tab-content">

            </div>
        </div>
    </div>
</div>
</body>
</html>


<script>
    var tabList = [];
    $(function () {
        ChangeFrame("Machine", '服务器监控')
    })

    function ChangeFrame(tag, name) {
        var element = layui.element;
        var url = "";
        if (tag == "Machine") {
            url = GetRootPath() + "pages/machine/machineinfo.html";
        } else if (tag == "JarManage") {
            url = GetRootPath() + "pages/depoly/project_list.html";
        } else if (tag == "WarManage") {
            url = GetRootPath() + "pages/war/war_list.html";
        } else if (tag == "MySQL") {
            url = GetRootPath() + "pages/plugin/adminer.php";
        } else if (tag == "Redis") {
            url = GetRootPath() + "pages/redis/redis_manage.html";
        } else if (tag == "Nginx") {
            url = GetRootPath() + "pages/nginx/nginxmanage.html";
        } else if (tag == "File") {
            url = GetRootPath() + "pages/plugin/filemanage.php";
        } else if (tag == "StaticDepoly") {
            url = GetRootPath() + "pages/plugin/staticdepoly.php";
        } else if (tag == "DynamicProxy") {
            url = GetRootPath() + "pages/proxy/proxy_list.html";
        } else if (tag == "FireWall") {
            url = GetRootPath() + "pages/firewall/firewall_list.html";
        } else if (tag == "Service") {
            url = GetRootPath() + "pages/service/service_list.html";
        }
        if (tabList.indexOf(tag) < 0) {
            tabList.push(tag);
            element.tabAdd('maintab', {
                title: name
                , content: " <iframe id='tag' src='" + url + "' class='frame'></iframe>"
                , id: tag
            })
        }
        element.tabChange('maintab', tag);
        $(".layui-nav-item").removeClass("nav-slected")
        $("#menu_" + tag).addClass("nav-slected")
        element.on('tabDelete(maintab)', function (data) {
            tabList.splice(data.index, 1);
        });
        element.on('tab(maintab)', function (data) {
            $(".layui-nav-item").removeClass("nav-slected")
            $("#menu_" + tabList[data.index]).addClass("nav-slected")
        });
        layui.element.render();
    }
</script>